<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tab选项卡</title>
	<style type="text/css">
		.container{
			width: 400px;
			height: 400px;
			margin: 20px auto;
		}
		nav{
			width: 400px;
			height: 50px;
			display: flex;
		}
		nav a{
			display: block;
			flex-direction: row;
			flex: 1;
			text-align: center;
			line-height: 50px;
			color:black;
			text-decoration: none;
		}
		.content div{
			width: 400px;
			height: 350px;
			font-size: 30px;
			color: pink;
			text-align: center;
			line-height: 350px;
			display: none;
		}
		.content .boxShow{
			display: block;
			background-color: pink;
			color: white;
		}
		nav .aShow{
			background-color: white;
			color: pink;
		}
	</style>
</head>
<body>
	<div class="container">
		<nav>
			<a href="#" class="aShow">第一个</a>
			<a href="#">第二个</a>
			<a href="#">第三个</a>
			<a href="#">第四个</a>
		</nav>
		<div class="content">
			<div class="boxShow">BOX1</div>
			<div>BOX2</div>
			<div>BOX3</div>
			<div>BOX4</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var btns=document.getElementsByTagName('a');
	//不可以用document.getElementsById('box') 因为ID不可以重复，只能选中第一个
	var content=document.getElementsByClassName('content')[0];
	var box=content.getElementsByTagName('div');
	//遍历a标签，因为每个a标签都要绑定事件，重复操作
	for(var i=0;i<btns.length;i++){
		btns[i].index=i;
		btns[i].onclick=function(){
			//绑定事件前要先把className清空
			for(var j=0;j<btns.length;j++){
			btns[j].className='';
			box[j].className='';
		}
		this.className='aShow';
		box[this.index].className='boxShow';
		}
	}
</script>
</html>